var wrap=document.getElementById("wrap");
var inner=document.getElementById("inner");
var spanList=document.getElementById("paganation").getElementsByTagName("span");

var clickFlag=true;
var time
var index=0;
var distance=wrap.offsetWidth;
function AutoGo(){
    var start=inner.offsetLeft;
    var end=index*distance*(-1);
    var change=end-start;

    var timer;
    var t=0;
    var maxT=30;
    clear();
    if(index==spanList.length){
        spanList[0].className="selected";
    }else{
        spanList[index].className="selected";
    }
    clearInterval(timer);
    timer=setInterval(function(){
        t++;
        if(t>=maxT){
            clearInterval(timer);
            clickFlag=true;
        }
        inner.style.left=change/maxT*t+start+"px";
        if(index==spanList.length&&t>=maxT){
            inner.style.left=0;
            index=0;
        }
    },17);
}
function forward(){
    index++;
    if(index>spanList.length){
        index=0;
    }
    AutoGo();
}
time=setInterval(forward,3000);
wrap.onmouseover=function(){
    clearInterval(time);
}
wrap.onmouseout=function(){
    span_event();
    time=setInterval(forward,3000);
}
function span_event(){
    for(var i=0;i<spanList.length;i++){
        spanList[i].onclick=function(){
            index=this.innerText-1;
            AutoGo();
        }
    }
}
function clear(){
    for(var i=0;i<spanList.length;i++){
        spanList[i].className="";

    }

}

